<template>
<div class="indexi_big">
<div class="in_top">
  <!-- 轮播懒加载 -->
 <van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
  <img :src="'http://liufusong.top:8080' + image.imgSrc" alt="">
  </van-swipe-item>
</van-swipe>
  </div>
  <!-- 搜索框 -->
  <div class="in_search">
  <van-search
  v-model="value"
  show-action
  label="上海"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
 <template #action>
    <div><van-icon name="location-o"  size="20" @click="$router.push('/map')" /></div>
  </template>
         <template #left-icon>
          <van-icon class=" iconfont icon-xiasanjiaoxing" @click="$router.push('/city')" />
          </template>
        </van-search>

  </div>
  <!-- 整租 -->
  <van-grid>
  <van-grid-item icon="wap-home-o" text="整租" />
  <van-grid-item icon="friends-o" text="合租" />
  <van-grid-item icon="cashier-o" text="地图找房" />
  <van-grid-item icon="cash-back-record" text="去租房" to="/gorent" />
</van-grid>

  <!-- 租房小组 -->
  <div class="group">
    <h3 class="group_title">租房小组</h3>
    <span class="more">更多</span>
  </div>
  <div class="group_img">
    <div class="group_img_top">
      <div class="group_img_topleft">
        <div class="topleft_img"><img src="http://liufusong.top:8080/img/groups/3.png" alt="图片"></div>
        <div class="topleft_text">家住回笼观<br>的归属感</div>
      </div>
       <div class="group_img_topleft">
         <div class="topleft_img"><img src="http://liufusong.top:8080/img/groups/2.png" alt="图片"></div>
        <div class="topleft_text">宜居四五环<br>大都市生活</div>
       </div>
    </div>
    <div class="group_img_top">
       <div class="group_img_topleft">
        <div class="topleft_img"><img src="http://liufusong.top:8080/img/groups/1.png" alt="图片"></div>
        <div class="topleft_text">喧嚣三里屯<br>繁华的背后</div>
      </div>
       <div class="group_img_topleft">
         <div class="topleft_img"><img src="http://liufusong.top:8080/img/groups/4.png" alt="图片"></div>
        <div class="topleft_text">比邻十号线<br>比邻十号线</div>
       </div>
    </div>
    </div>

  </div>
</template>

<script>
import { SwiperFn } from '@/api/home'
export default {
  data () {
    return {
      value: '',
      images: [
      ]
    }
  },
  async created () {
    const { body } = await SwiperFn()
    console.log(body)
    this.images = [...body]
    console.log(this.images)
  },
  methods: {
    onSearch () {
      console.log(1111)
    },
    onCancel () {
      this.$toast('取消')
    }
  }
}
</script>

<style lang="less">
.in_top img{
  width: 375px;
  height: 272px;
}

 .van-search {
  position: absolute;
  top: 0;
  width: 330px;
  height: 34px;
  margin-top: 20px;
  margin-left: 20px;
}
.group{
  display: flex;
  justify-content:space-between ;
}
.group_title{
  display: block;
  position: relative;
  margin: 15px 0 15px 0;
  font-size: 15px;
}
.group .more{
    color: #787d82;
    font-size: 14px;
    font-weight: 400;
    margin-right: 15px;
    margin-top: 15px;
}
.group_img_top{
  display: flex;
  justify-content: space-between;
  margin: 0 15px 0 15px;

}
.group_img_topleft{
  display: flex;
  justify-content: space-between;
  width: 172px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fff;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}
.indexi_big{
  background-color: #f6f6f6;
}
.topleft_text{
 margin: 10px;

}
.topleft_img img{
  width: 50px;
  height: 50px;
  padding-left: 5px;
}

</style>
